/* constant */
@rem: 25rem;

// 内容
.container{
  // 下拉
  .pull-hook{
    font-size: 15/@rem;
  }

  // 列表
  .data-list{
    font-size: 12/@rem;
    .data-list-item{
      margin: 10/@rem 0;
      text-align: left;
      background: #FFFFFF;
      //border-radius: 5/@rem;
      // 头部
      .head{
        padding: 10/@rem 15/@rem;
        display: flex;
        justify-content: space-between;
        color: #888888;
        p,h3{
          margin: 0;
        }
        .left{
          h3{
            font-size: 15/@rem;
            font-weight: normal;
            margin: 0 0 10/@rem;
            color: #000000;
          }
        }
        .right{
          text-align: right;
          .type{
            color: #20AD20;
            margin: 0 0 10/@rem;
          }
        }
      }

      // 内容
      .body{
        overflow: hidden;
        margin-bottom: 10/@rem;

        // 详述
        .detail{
          overflow: hidden;
          font-size: 12/@rem;
          padding: 0 15/@rem;
          .detail-item{
            display: flex;
            margin: 15/@rem 0;
            // 侧边
            .side{
              margin-right: 15/@rem;
              min-width: 60/@rem;
            }
            // 音频
            .audio{
              background: #5B9BF3;
              color: #FFFFFF;
              padding: 5/@rem 10/@rem;
              border-radius: 5/@rem;
            }
            // 图片
            .img-wrap{
              height: 80/@rem;
              overflow: hidden;
              border-radius: 5/@rem;
              border: 1/@rem solid #ddd;
              .img{
                width: 150/@rem;
                height: 150/@rem;
              }
            }
            // 订单状态
            .type{
              color: #ffb578;
              margin-left: 10/@rem;
            }
          }
        }

        // 地址
        .address{
          overflow: hidden;
          font-size: 12/@rem;
          padding: 0 15/@rem;
          border-top: 1/@rem solid #ddd;
          border-bottom: 1/@rem solid #ddd;
          .address-item{
            display: flex;
            margin: 15/@rem 0;
            img{
              width: 23/@rem;
              height: 23/@rem;
            }
            p{
              margin: 0 0 0 10/@rem;
              height: 25/@rem;
              line-height: 25/@rem;
            }
          }
        }
      }

      // 底部
      .footer{
        padding: 0 10/@rem 10/@rem;
        font-size: 15/@rem;
        overflow: hidden;
        button{
          color: #FFFFFF;
          background: #20AD20;
          border: none;
          width: 100%;
          height: 40/@rem;
          line-height: 40/@rem;
          border-radius: 5/@rem;
        }
      }
    }
  }
}
